<template>
  <ContentWrap>
    <el-card>
      <template #header>
        <div class="card-header">
          <span class="title">{{route.query.id ? '编辑' : '新增'}}样品信息</span>
          <div class="right-button">
            <el-button type="primary" @click="handleSave(1)" v-if="ruleCode != 'third_party' && formData.status != 1 && formData.status !=2  && formData.status !=3"
              >送检</el-button
            >
            <el-button type="primary" @click="handleSave(0)" v-if="formData.status != 1 && formData.status != 2 && formData.status !=3">保存</el-button>
            <el-button @click="goBack">返回</el-button>
          </div>
        </div>
      </template>

      <el-form ref="formRef" :model="formData" :rules="rules" label-width="120px" class="mt-20px">
        <!-- 项目信息 -->
        <el-card class="mb-4 pr-4">
          <template #header>
            <div class="text-lg font-bold">项目信息</div>
          </template>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="项目名称" prop="name">
              

                <el-input  :disabled="formData.status == 1"  v-model="formData.name"  placeholder="请输入项目名称" >
                  <template #suffix>
                      <i class="iconfont icon-sousuo" style="cursor: pointer;" @click="handleSearch1" ></i>
      </template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label-width="140" label="项目起始日期" prop="checkStartTime">
                <!-- <el-date-picker
                  v-model="formData.checkStartTime"
                  type="date"
                  placeholder="选择日期"
                  value-format="YYYY-MM-DD"
                /> -->

                <el-date-picker
                style="width: 100%;"
                  v-model="formData.projectManage.startTime"
                  type="date"
                  disabled
                  placeholder="请选择项目起始时间"
                  value-format="YYYY-MM-DD"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="项目截止日期" prop="checkEndTime">

                <el-date-picker
                disabled
                  v-model="formData.projectManage.endTime"
                  type="date"
                  placeholder="请选择项目截止日期"
                  value-format="YYYY-MM-DD"
                  style="width: 100%;"
                />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="甲方单位" prop="fistParty">
                <el-input disabled  v-model="formData.projectManage.firstpartyName" placeholder="请输入甲方单位" />

              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label-width="140" label="合同金额（万元）" prop="contractAmount" >
                <el-input
                  v-model.number="formData.projectManage.contractAmount"
                  disabled
                 
                  placeholder="请输入合同金额（万元）"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="合同编号" prop="contractNum">
                <el-input disabled v-model="formData.projectManage.contractNum"    placeholder="请输入合同编号" />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="项目管理员" prop="projectManager">
                <el-input disabled v-model="formData.projectManage.projectManager"   placeholder="请输入项目管理员" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>

<div >


        <!-- 基本信息 -->
        <el-card class="mb-4 pr-4">
          <template #header>
            <div class="text-lg font-bold">基本信息</div>
          </template>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="样品名称" prop="sampleName">
                <el-input :disabled="formData.status == 1"  v-model="formData.sampleName"   placeholder="请输入样品名称" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="样品编号" prop="sampleNum">
                <el-input  :disabled="formData.status == 1"  v-model="formData.sampleNum"   placeholder="请输入样品编号" />
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="盲样编号" prop="blindSampleNum">
                <el-input :disabled="formData.status == 1"  v-model="formData.blindSampleNum"   placeholder="请输入盲样编号" />
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="规格型号" prop="model">
                <el-input :disabled="formData.status == 1"  v-model="formData.model"   placeholder="请输入规格型号" />
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="执行标准" prop="executiveStandard">
                <el-input  :disabled="formData.status == 1" @input="handleInput1"  v-model="formData.executiveStandard"  placeholder="请输入执行标准" >
                  <template #suffix>
                      <i class="iconfont icon-sousuo" style="cursor: pointer;" @click="handleSearch" ></i>
      </template>
                </el-input>

              </el-form-item>
            </el-col>



            <el-col :span="8">
              <el-form-item label="委托单位" prop="entrustCompany">
                <el-input :disabled="formData.status == 1"  v-model="formData.entrustCompany"   placeholder="请输入委托单位" />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="受检单位" prop="receiveCheckCompany">
                <el-input :disabled="formData.status == 1"  v-model="formData.receiveCheckCompany"   placeholder="请输入受检单位" />
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="生产单位" prop="productionCompany">
                <el-input :disabled="formData.status == 1"  v-model="formData.productionCompany"   placeholder="请输入生产单位" />
              </el-form-item>
            </el-col>


          </el-row>
        </el-card>
        <!-- 抽样信息 -->
        <el-card class="mb-4 pr-4">
          <template #header>
            <div class="text-lg font-bold">抽样信息</div>
          </template>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="抽样地点" prop="samplingSite">
                <el-input :disabled="formData.status == 1"  v-model="formData.samplingSite"   placeholder="请输入抽样地点" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="抽样日期" prop="samplingDate">
     

                <el-date-picker
                 :disabled="formData.status == 1"
                  v-model="formData.samplingDate"
                  type="date"
                   style="width: 100%;"
                  placeholder="请选择抽样日期"
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="样品批(罐)号" prop="sampleBatchNum">
                <el-input :disabled="formData.status == 1"  v-model="formData.sampleBatchNum"    placeholder="请输入样品批号" />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="生产日期" prop="productionDate">
  

                <el-date-picker
                :disabled="formData.status == 1"
                style="width: 100%;"
                  v-model="formData.productionDate"
                  type="date"
                  placeholder="请选择生产日期"
                  value-format="YYYY-MM-DD"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="产品包装" prop="productPackaging">
                <el-input :disabled="formData.status == 1"  v-model="formData.productPackaging"    placeholder="请输入产品包装" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="存放条件" prop="storeCondition">
                <el-input :disabled="formData.status == 1"  v-model="formData.storeCondition"  placeholder="请输入存放条件" />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="物资编码" prop="sampleCode">
                <el-input :disabled="formData.status == 1"  v-model="formData.sampleCode"   placeholder="请输入物资编码" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="抽样基数" prop="samplingCardinalNum">
                <el-input :disabled="formData.status == 1"  v-model="formData.samplingCardinalNum"   placeholder="请输入抽样基数" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="抽取样品量" prop="samplingQuantity">
                <el-input :disabled="formData.status == 1"  v-model="formData.samplingQuantity"   placeholder="请输入抽样数量" />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="封样形式" prop="sealedSampleMethod">
                <el-input  :disabled="formData.status == 1"  v-model="formData.sealedSampleMethod"   placeholder="请输入封样形式" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="运送方式" prop="deliveryType">
                <el-input :disabled="formData.status == 1"  v-model="formData.deliveryType"   placeholder="请输入送样方式" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="抽样人员" prop="samplingPerson">
                <el-input :disabled="formData.status == 1"  v-model="formData.samplingPerson"   placeholder="请输入抽样人" />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="陪同抽样人" prop="accompanySamplingPerson">
                <el-input
                :disabled="formData.status == 1" 
                  v-model="formData.accompanySamplingPerson"
                  placeholder="请输入陪同抽样人"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="受检单位人员" prop="receiveCheckCompanyPerson">
                <el-input
                :disabled="formData.status == 1" 
                  v-model="formData.receiveCheckCompanyPerson"
                 
                   placeholder="请输入受检单位人员"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="抽样方式" prop="samplingType">
                <el-select :disabled="formData.status == 1"  v-model="formData.samplingType" placeholder="请选择抽样方式">
                  <el-option label="委托方自行抽样 " :value="0" />
                  <el-option label="机构自抽自检" :value="1" />
                  <el-option label="第三方抽样" :value="2" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>
      </div>     



        <!-- 退样说明 -->
        <el-card class="mb-4 pr-4">
          <template #header>
            <div class="text-lg font-bold">退样说明</div>
          </template>
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="退样方式" prop="returnSampleType">
                <el-radio-group :disabled="formData.status == 1"  v-model="formData.returnSampleType">
                  <el-radio :label="0">不退</el-radio>
                  <el-radio :label="1">退</el-radio>
                  <el-radio :label="2">部分退</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20" v-if="formData.returnSampleType != 0">
            <el-col :span="8">
              <el-form-item label="退样收货人" prop="returnSampleReceiveBy">
                <el-input
:disabled="formData.status == 1"  v-model="formData.returnSampleReceiveBy"
                
                placeholder="请输入退样收货人" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="退样收货地址" prop="returnSampleReceiveAddress">
                <el-input
                :disabled="formData.status == 1"
                  v-model="formData.returnSampleReceiveAddress"
                 
                  placeholder="请输入退样收货地址"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="收货联系方式" prop="returnSampleReceivePhone">
                <el-input
                :disabled="formData.status == 1"
                  v-model="formData.returnSampleReceivePhone"
                 
                  placeholder="请输入收货联系方式"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>

        <!-- 检验要求 -->
        <el-card class="mb-4 pr-4">
          <template #header>
            <div class="text-lg font-bold">检验要求</div>
          </template>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="检验类别" prop="checkType">
                <el-select :disabled="formData.status == 1"  v-model="formData.checkType" placeholder="请选择检验类型">
                  <el-option label="委托" :value="1" />
                  <el-option label="监督" :value="2" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="检验时限" prop="checkTimeLimit">
                <el-date-picker
                :disabled="formData.status == 1" 
                  v-model="formData.checkTimeLimit"
                  type="date"
                  placeholder="请选择检验时限"
                  value-format="YYYY-MM-DD"
                />

                <!-- <el-date-picker
        v-model="formData.checkTimeLimit"
        type="datetime"
        placeholder="Select date and time"
      /> -->
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="承检机构" prop="orgId" >
                <el-select :disabled="formData.status == 1"  v-model="formData.orgId" placeholder="请选择承检机构">
                  <el-option :label="item.name" :value="item.id"  v-for="(item,index) of orgList" :key="index"/>
                </el-select>
                <!-- <el-input v-model="formData.orgId" placeholder="请输入承检机构id" /> -->
              </el-form-item>
            </el-col>


          </el-row>

          <el-row :gutter="24">
            <el-col :span="8">
              <el-form-item label="结果要求" prop="resultRequire">
                <el-radio-group :disabled="formData.status == 1"  v-model="formData.resultRequire">
                  <el-radio :label="0">出具检测结果</el-radio>
                  <el-radio :label="1">判定检验结果</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          
          </el-row>

          <el-row>
            <el-col :span="7">
              <el-form-item label="指标要求" prop="targetRequire">
                <el-radio-group :disabled="formData.status == 1"  v-model="formData.targetRequire">
                  <el-radio :label="0">指定检测项目</el-radio>
                  <el-radio :label="1">按照检验依据要求</el-radio>
                </el-radio-group>

              </el-form-item>
            </el-col>
            <div class="flex text-red-500">
                  <span class="inline-block w-40 text-right">
  备注：
</span>
<pre style="margin: 0; font-family: inherit; ">
(1)指定检测项目:逐条列出检测指标名称、检测方法、判定标准(不要求判定时可不填)
(2)按照检验依据要求:检验员在录入检验结果时指定检验项目
</pre>
                </div>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="检验依据" prop="checkAccordingTo">
                <el-input
                 :disabled="formData.status == 1"
                  v-model="formData.checkAccordingTo"
                  :maxlength="100"
                  type="textarea"
                  :rows="3" 
                  placeholder="请输入检验依据"
                />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="备注" prop="requireRemark">
                <!--        class="custom-placeholder" -->
                <el-input
         
                placeholder="请输入备注"
                :disabled="formData.status == 1"
                :maxlength="100"
                v-model="formData.requireRemark"
                  type="textarea"
                  :rows="3"  
                />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="附件上传" prop="requireAttachment">
            <el-upload
              action="#"
              :limit="5"
              :auto-upload="false"
              :file-list="fileList1"
              :before-upload="beforeUpload"
               :on-exceed="handleExceed"
              :http-request="handleFileChange1"
               :accept="'image/png, image/jpeg, application/pdf, application/zip'"
                :on-preview="handlePreview"
                :on-change="handleFileSelect1"
                :on-remove="handleRemove1"
            >
              <template #tip>
                <div class="el-upload__tip">
                  请上传png、jpg、pdf、zip格式文件。大小不超过50M。
                </div>
              </template>
              <el-button type="primary">选择文件</el-button>
            </el-upload>
          </el-form-item>
            </el-col>
          </el-row>
        </el-card>

        <el-card class="mb-4">
          <template #header>
            <div class="text-lg font-bold">抽样单签字版扫描件、样品照片</div>
          </template>

          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="附件上传" prop="signAndSampleUrl">
                <!-- <el-upload
                :disabled="formData.status == 1"
                 class="custom-upload"
                  action="#"
                  list-type="picture-card"
                  :auto-upload="false"
                  :on-change="handleFileChange"
                  :file-list="fileList"
                  :on-preview="handlePictureCardPreview"
                >
                  <el-icon><Plus /></el-icon>
                </el-upload> -->
 
                <el-upload
              action="#"
              :limit="5"
              :auto-upload="false"
              :file-list="fileList"
              :before-upload="beforeUpload"
               :on-exceed="handleExceed"
              :http-request="handleFileChange"
               :accept="'image/png, image/jpeg, application/pdf, application/zip'"
                :on-preview="handlePreview"
                :on-change="handleFileSelect2"
                :on-remove="handleRemove2"
            >
              <template #tip>
                <div class="el-upload__tip">
                  请上传png、jpg、pdf、zip格式文件。大小不超过50M。
                </div>
              </template>
              <el-button type="primary">选择文件</el-button>
            </el-upload>
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>
      </el-form>
    </el-card>
  </ContentWrap>

  <el-dialog
    v-model="dialogVisible"
    title="选择检验标准"
    width="800"
    :before-close="handleClose"
  >
  <el-form :model="form" label-width="auto" inline style="width:100%s">
      <el-row :gutter="24">
        <el-col :span="8">
          <el-form-item label="标准名称:" >
      <el-input v-model="dialogForm.name" placeholder="请输入标准名称" />
    </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="标准编号:">
      <el-input v-model="dialogForm.num" placeholder="请输入标准编号" />
    </el-form-item>
        </el-col>
        <el-row :span="8">
        <el-form-item>
        <el-button type="primary" @click="dialogSearch">搜索</el-button>
        <el-button  @click="dialogReset">重置</el-button>
       </el-form-item>
       </el-row></el-row>

       
 




      <div style="max-height:200px;overflow: auto;">
        <el-table class="table-container" :data="dialogTableData" style="width: 100%">
          <el-table-column width="55">
        <template #header>
          <span>选择</span>
        </template>
        <template #default="scope">
          <el-radio v-model="selectedRowId" :value="scope.row.id" @change="dialogRadio(scope.row)" />
        </template>
      </el-table-column>
    <el-table-column prop="name" align="center" label="标准名称" width="180" />
    <el-table-column prop="num"  align="center" label="标准编号" width="180" />
    <el-table-column prop="publishCompany"  align="center" label="标准分类" width="180" />
    <el-table-column prop="publishDate"  align="center" label="发布日期" />
  </el-table>
      </div>
      

    </el-form>  
    <div style=" display:flex;margin-top: 20px;justify-content: end;">
        <el-button type="primary" @click="dialogEntry">确认</el-button>
        <el-button  @click="handleClose">取消</el-button>
      </div>
  </el-dialog>


  <el-dialog
    v-model="dialogVisible1"
    title="选择项目"
    width="750"
    :before-close="handleClose"
  >
  <el-form :model="dialogForm1" label-width="auto" >
      <el-row :gutter="24">
        <el-col :span="8">
          <el-form-item label="项目名称:" >
      <el-input v-model="dialogForm1.name"  placeholder="请输入项目名称" />
    </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="甲方单位:">
      <el-input v-model="dialogForm1.firstpartyName" placeholder="请输入甲方单位" />
    </el-form-item>
        </el-col>

        <el-col :span="8">  <el-button type="primary" @click="dialogSearch1">搜索</el-button>
          <el-button  @click="dialogReset1">重置</el-button></el-col>
      </el-row>



   


      <div style="max-height: 200px; overflow: auto;">
        <el-table :data="tableList1" >
          <el-table-column width="55">
        <template #header>
          <span>选择</span>
        </template>
        <template #default="scope">
          <el-radio v-model="selectedRowId" :value="scope.row.id" @change="dialogRadio1(scope.row)" />
        </template>
      </el-table-column>
    <el-table-column prop="name" align="center" label="项目名称" width="180" />
    <el-table-column prop="startTime"  align="center" label="项目起始时间" width="180" />
    <el-table-column prop="endTime"  align="center" label="项目截止时间" width="180" />
    <el-table-column prop="firstpartyName"  align="center" label="甲方单位" />
  </el-table>
      </div>
      

    </el-form>  

    <template #footer>
      <div>
        <el-button type="primary" @click="dialogEntry1">确认</el-button>
        <el-button  @click="dialogVisible1 = false">取消</el-button>
      </div>
    </template>
  </el-dialog>


</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import { SampleInformationApi } from '@/api/qis/sampleinformation'
import { useMessage } from '@/hooks/web/useMessage'
import { Plus } from '@element-plus/icons-vue'
import { UserInfoApi } from '@/api/qis/userInfo'
import { ProjectManagemenrApi } from '@/api/qis/projectmanagemenr'
import { head } from 'axios'
import { StandardMaintainApi } from '@/api/qis/standardmaintain'
// import { ElMessageBox } from 'element-plus/es/components/message-box'
import { ElMessage, ElMessageBox } from 'element-plus'
import type { UploadProps, UploadUserFile } from 'element-plus'
const router = useRouter()
const message = useMessage()
const formRef = ref()

const treeData = ref<any>([])



const defaultProps = ref<any>({
  children: 'children',
  label: 'name'
})

const dialogForm1 = ref({
  name: '',
  firstpartyName:'',
  pageNo:1,
  pageSize:100,
})

const selectable1 = ref('')
const dialogRadio1 = (row)=>{
  console.log(row,'row')
  selectable1.value = row
}

const route = useRoute()
console.log(route.meta.title,'route')
const type = route.query.type
const id = route.query.id as unknown as Number

let formData = ref({
  projectManage:{
    checkEndTime:'',
    fistParty:'',
    contractAmount:'',
    contractNum:'',
    projectManager:'',
    endTime:'',
    startTime:'',
  },
  targetRequire: undefined,
  standardType:0,
  resultRequire:undefined,
  returnSampleType:0,
})




const handleSearch1 = ()=>{
  dialogVisible1.value = true
}




const tableList1 = ref([])
const getTableList1  = async ()=>{
  const res =  await  ProjectManagemenrApi.getProjectManagemenrPage1(dialogForm1.value)
  console.log(res,'res.data')
  tableList1.value = res.list
}


const fileList = ref<any>([])
const fileList1 = ref<any>([])

const handleFileChange = async (target: any) => {
console.log("🚀 ~ handleFileChange ~ target:", target)
const fileDataFile = new FormData()
fileDataFile.append('file', target.file)

const res = await SampleInformationApi.uploadFileApi(fileDataFile)
imgUrl.value = res
// imgUrl.value = 'http://192.168.2.241:8040' + imgUrl.value
imgUrl.value = (window.configUrl.minIo?window.configUrl.minIo: 'http://182.151.214.104:8040') + imgUrl.value

fileList.value.push({
  uid: target.file.uid, // 生成唯一的 uid
  name: imgUrl.value.split('/').pop(), // 从 URL 中提取文件名
  url: imgUrl.value
})
message.success('上传成功')
}


const handleInput1 = (value)=>{
  selectRadioItem.value  = ''
   if(!selectRadioItem.value.id){
    formData.value.standardType = 0
    formData.value.executiveStandard = value
   }
  
}

const imgUrl = ref<any>([])
  const imgArr = []
/**   机构资质上传文件上传改变事件 */
const handleFileChange1 = async (target: any) => {
const fileDataFile = new FormData()
fileDataFile.append('file', target.file)

const res = await SampleInformationApi.uploadFileApi(fileDataFile)
imgUrl.value = res
// imgUrl.value = 'http://192.168.2.241:8040' + imgUrl.value
imgUrl.value =(window.configUrl.minIo?window.configUrl.minIo: 'http://182.151.214.104:8040') + imgUrl.value

fileList1.value.push({
  uid: target.file.uid, // 生成唯一的 uid
  name: imgUrl.value.split('/').pop(), // 从 URL 中提取文件名
  url: imgUrl.value
})
 fileList1.value.forEach((file,index)=>{
  file.name = '附件'+ (index+1)
})
console.log(fileList1.value,'fileList1.value')
message.success('上传成功')
}

// 删除机构资质上传文件
const beforeRemove = (uploadFile, uploadFiles)=>{
  fileList.value = fileList.value.filter(item=>{
    return item.uid !== uploadFile.uid
  })
}

// 删除机构资质上传文件
const beforeRemove1 = (uploadFile, uploadFiles)=>{
  fileList1.value = fileList1.value.filter(item=>{
    return item.uid !== uploadFile.uid
  })
}

const handlePreview = (file)=>{
  console.log(file,'file')
  const imageExtensions = ['jpg', 'jpeg', 'png','pdf'];
  const fileExtension = file.name.split('.').pop().toLowerCase();
  if (imageExtensions.includes(fileExtension)) {
        // 如果是图片，在新窗口中打开
        window.open(file.url, '_blank');
    } else {
        // 不是图片，进行文件下载
        const a = document.createElement('a');
        const url = file.url;
        a.download = file.name;
        a.href = url;
        a.click();
    }
}


// 文件限制

const beforeUpload = (file, isShowMessage = true) => {
  const baseSize = 50
  // const isAllowedType = ['image/png', 'image/jpeg', 'application/pdf', 'application/zip'].includes(file.type);
  // if (!isAllowedType) {
  //       message.error('请上传png、jpg、pdf、zip格式的文件。');
  //       return false;
  //     }
  const maxSize = baseSize * 1024 * 1024 // 50MB
  if (file.size > maxSize) {
    isShowMessage && message.warning(`文件大小不能超过 ${baseSize}MB`)
    return false
  }

  return true
}

/** 处理文件超出限制 */
const handleExceed = (files: File[], uploadFiles: File[]) => {
  console.log(111)
  message.warning(`最多只能上传 5 个文件，当前已选择了 ${uploadFiles.length} 个文件`)
}

const dialogVisible1 =ref(false)

// 弹窗表单
const dialogForm = ref({
  num:'',
  name:'',
  pageNo:1,
  pageSize:100
})
// 控制弹出层
const dialogVisible = ref(false)
// 关闭弹窗
const handleClose = ()=>{
  dialogVisible.value = false
}

const  tempFileList1 = ref<any>([])
const handleFileSelect1 = (file: any, fileList: any) => {
  console.log('File selected:', file, fileList)
  if (file.raw) {
    tempFileList1.value.push(file.raw)
    // fileList1.value = fileList
  }
  fileList1.value = fileList.map((f,index) => ({
    name: `附件${index + 1}`,
    url: f.url || URL.createObjectURL(f.raw),
    uid: f.uid || new Date().getTime()
  }))
}

const handleRemove1 = (uploadFile: UploadFile, uploadFiles: UploadFiles) => {
  console.log('Removing qualification file:', uploadFile)
  
  // 更新显示的文件列表
  fileList1.value = uploadFiles
  
  // 从临时文件列表中移除被删除的文件（如果是新上传的）
  const index = tempFileList1.value.findIndex(file => file.name === uploadFile.name)
  if (index !== -1) {
    tempFileList1.value.splice(index, 1)
  }
  
  // 如果文件已经上传过，从 dialogData 中也移除
  if (formData.value.requireAttachment) {
    const attachments = formData.value.requireAttachment.split(';').filter(Boolean)
    const updatedAttachments = attachments.filter(url => {
      // 检查文件名是否匹配
      const fileName = url.split('/').pop()
      return fileName !== uploadFile.name
    })
    formData.value.requireAttachment = updatedAttachments.join(';')
  }
  
  // 如果所有文件都被删除，清空 attachment
  if (uploadFiles.length === 0) {
    formData.value.requireAttachment = ''
  }
  
  console.log('Updated attachment:', formData.value.requireAttachment)
}

const uploadFiles1 = async () => {
  // 如果是编辑模式，我们需要检查哪些文件被保留了
  if (formData.value.id) {
    // 获取当前显示的文件URL列表
    const currentFileUrls = fileList1.value
      .filter(file => file.url && file.url.startsWith('http'))
      .map(file => file.url)
    
    // 直接使用这些URL作为attachment，不需要重新上传已有的文件
    formData.value.requireAttachment
    = currentFileUrls.join(';')
    console.log( formData.value.requireAttachment,' formData.value.requireAttachment')
  }
  
  // 只上传新添加的文件
  if (tempFileList1.value.length === 0) return true
    const uploadPromises = tempFileList1.value.map(async (file) => {
      const formData = new FormData()
      formData.append('file', file)
      const res = await SampleInformationApi.uploadFileApi(formData)
      return (window.configUrl.minIo?window.configUrl.minIo: 'http://182.151.214.104:8040') + res
    })
    console.log(11111111)
    const urls = await Promise.all(uploadPromises)
    console.log(22222222222)
    // 将新上传的URL添加到现有URL中
    const currentUrls = formData.value.requireAttachment
    ? 
      formData.value.requireAttachment
      .split(';').filter(Boolean) : []
    
      formData.value.requireAttachment
      = [...currentUrls, ...urls].join(';')
    tempFileList1.value = []
    console.log('最终保存的附件:', formData.value.requireAttachment
    )
    return true
 
}
const tempFileList2 = ref<any>([])
const handleFileSelect2 = (file: any, fileListParms: any) => {
  console.log('Staff file selected:', file, fileList)
  if (file.raw) {
    // 只在文件被添加时处理
    console.log('ready',file.status)
    if (file.status === 'ready') {
      console.log("ready")
      tempFileList2.value.push(file.raw)
    }
    // 更新文件列表，保留已有文件的URL，为新文件创建临时URL
    console.log(111,fileListParms)
    fileList.value = fileListParms.map((f,index) => ({
      name: `附件${index + 1}`,
      url: f.url || URL.createObjectURL(f.raw),
      uid: f.uid || new Date().getTime()
    }))
  }
  console.log('当前文件列表:', fileList.value)
}

const handleRemove2 = (uploadFile: UploadFile, uploadFiles: UploadFiles) => {
  fileList.value = uploadFiles
  
  // 从临时文件列表中移除
  const index = tempFileList2.value.findIndex(file => file.name === uploadFile.name)
  if (index !== -1) {
    tempFileList2.value.splice(index, 1)
  }
  
  // 从已上传文件中移除
  if (formData.value.signAndSampleUrl) {
    const attachments = formData.value.signAndSampleUrl.split(';').filter(Boolean)
    const updatedAttachments = attachments.filter(url => !url.includes(uploadFile.name))
    formData.value.signAndSampleUrl = updatedAttachments.join(';')
  }
}

const uploadFiles2 = async () => {
  // 如果是编辑模式，我们需要检查哪些文件被保留了
  if (formData.value.id) {
    // 获取当前显示的文件URL列表
    const currentFileUrls = fileList.value
      .filter(file => file.url && file.url.startsWith('http'))
      .map(file => file.url)
    
    // 直接使用这些URL作为attachment，不需要重新上传已有的文件
    formData.value.signAndSampleUrl
    = currentFileUrls.join(';')
    console.log( formData.value.signAndSampleUrl,' formData.value.signAndSampleUrl')
  }
  
  // 只上传新添加的文件
  if (tempFileList2.value.length === 0) return true
    const uploadPromises = tempFileList2.value.map(async (file) => {
      const formData = new FormData()
      formData.append('file', file)
      const res = await SampleInformationApi.uploadFileApi(formData)
      return (window.configUrl.minIo?window.configUrl.minIo: 'http://182.151.214.104:8040') + res
    })
    
    const urls = await Promise.all(uploadPromises)
    // 将新上传的URL添加到现有URL中
    const currentUrls = formData.value.signAndSampleUrl
    ? 
      formData.value.signAndSampleUrl
      .split(';').filter(Boolean) : []
    
      formData.value.signAndSampleUrl
      = [...currentUrls, ...urls].join(';')
    tempFileList2.value = []
    console.log('最终保存的附件:', formData.value.signAndSampleUrl
    )
    return true

}


// 下载文件的方法
const downloadFile = (file) => {
  console.log(file)
  const imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'svg'];
  const fileExtension = file.name.split('.').pop().toLowerCase();
  
  if (imageExtensions.includes(fileExtension)) {
        // 如果是图片，在新窗口中打开
        window.open(file.url, '_blank');
    } else {
        // 不是图片，进行文件下载
        const a = document.createElement('a');
        const url = file.url;
        a.download = file.name;
        a.href = url;
        a.click();
    }
};



const validateSampleNum = (rule, value, callback) => {
    // 修正后的正则表达式，对特殊字符进行转义
    const reg = /^[a-zA-Z0-9`~!@#$%^&*()-=_+[\]\\{}|;':",./<>?]+$/;
    if (!value) {
        callback(new Error('请输入样品编号'));
    } else if (!reg.test(value)) {
        callback(new Error('只能输入字母、数字和符号，不允许输入汉字'));
    } else {
        callback();
    }
};

const validateChinese = (rule, value, callback) => {
  if(!value){
    callback()
    return 
  }
      const chineseRegex = /^[\u4e00-\u9fa5]+$/;
      if (!chineseRegex.test(value)) {
        callback(new Error('只能是汉字'));
      } else {
        callback();
      }
    };

const rules = {
  projectId: [{ required: true, message: '请输入项目名称', trigger: 'blur' },{
    max:30,message: '项目名称不能超过30个字符', trigger: 'blur'
  }],
  sampleName: [{ required: true, message: '请输入样品名称', trigger: 'blur' },{
    max:30,message: '样品名称不能超过30个字符', trigger: 'blur'
  }],
  sampleNum: [{ required: true, message: '请输入样品编号', trigger: 'blur' },{max:30, message: '样品编号不能超过30个字符', trigger: 'blur'}, { validator: validateSampleNum, trigger: 'blur' }],
  model: [{ required: true, message: '请输入规格型号', trigger: 'blur' },{
    max:30,message: '规格型号不能超过30个字符', trigger: 'blur'
  }],
  entrustCompany: [{ required: true, message: '请输入委托单位', trigger: 'blur' },{
    max:30,message: '委托单位不能超过30个字符', trigger: 'blur'
  }
],
  productionCompany: [{ required: true, message: '请输入生产单位', trigger: 'blur' },{max:30, message: '生产单位不能超过30个字符', trigger: 'blur'}],
  receiveCheckCompany: [{ required: true, message: '请输入受检单位', trigger: 'blur' },{max:30, message: '受检单位不能超过30个字符', trigger: 'blur'}],
  samplingSite: [{ required: true, message: '请输入抽样地点', trigger: 'blur' },{max:30, message: '抽样地点不能超过30个字符', trigger: 'blur'}],
  samplingDate: [{ required: true, message: '请选择抽样日期', trigger: 'change' }],
  productionDate: [{ required: true, message: '请选择生产日期', trigger: 'change' }],
  sampleCode: [{ required: true, message: '请输入物资编码', trigger: 'blur' },{max:20, message: '物资编码不能超过20个字符', trigger: 'blur'},],
  samplingQuantity: [{ required: true, message: '请输入抽取样品量', trigger: 'blur' },{max:10, message: '抽取样品量不能超过10个字符', trigger: 'blur'}],
  sealedSampleMethod: [{ required: true, message: '请输入封样形式', trigger: 'blur' },{max:20, message: '封样形式不能超过20个字符', trigger: 'blur'}],
  deliveryType: [{ required: true, message: '请输入运送方式', trigger: 'blur' },{max:20, message: '运送方式不能超过20个字符', trigger: 'blur'}],
  samplingPerson: [{ required: true, message: '请输入抽样人员', trigger: 'blur' },{max:20, message: '抽样人员不能超过20个字符', trigger: 'blur'}],
  accompanySamplingPerson: [{ required: true, message: '请输入陪同抽样人', trigger: 'blur' },{max:20, message: '陪同抽样人不能超过20个字符', trigger: 'blur'}],
  receiveCheckCompanyPerson: [{ required: true, message: '请输入受检单位人员', trigger: 'blur' },{max:20, message: '受检单位人员不能超过20个字符', trigger: 'blur'}],
  samplingType: [{ required: true, message: '请选择抽样方式', trigger: 'change' }],
  checkType: [{ required: true, message: '请选择检验类别', trigger: 'change' }],
  checkTimeLimit: [{ required: true, message: '请选择检验时限', trigger: 'change' }],
  orgId: [{ required: true, message: '请选择承检机构', trigger: 'change' }],
  resultRequire: [{ required: true, message: '请选择结果要求', trigger: 'change' }],
  targetRequire: [{ required: true, message: '请选择指标要求', trigger: 'change' }],
  returnSampleReceiveBy: [
    // {
    //   validator: (rule, value, callback) => {
    //     if (formData.value.returnSampleType!= '0' &&!value) {
    //       callback(new Error('退样收货人不能为空'));
    //     } else {
    //       callback();
    //     }
    //   },
    //   trigger: 'blur'
    // },
    {max:20, message: '退样收货人不能超过20个字符', trigger: 'blur' },
    {required: true, message: '请输入退样收货人', trigger: 'blur' },
        ],
        returnSampleReceiveAddress: [
    // {
    //   validator: (rule, value, callback) => {
    //     if (formData.value.returnSampleType!= '0' &&!value) {
    //       callback(new Error('退样收货地址不能为空'));
    //     } else {
    //       callback();
    //     }
    //   },
    //   trigger: 'blur'
    // },
    {max:50, message: '退样收货地址不能超过50个字符', trigger: 'blur' },

    {required: true, message: '请输入退样收货地址', trigger: 'blur' },
        ],
        returnSampleReceivePhone: [
    // {
    //   validator: (rule, value, callback) => {
    //     if (formData.value.returnSampleType!= '0' &&!value) {
    //       callback(new Error('收货联系方式不能为空'));
    //     } else {
    //       callback();
    //     }
    //   },
    //   trigger: 'blur'
    // },
    {max:20, message: '收货联系方式不能超过20个字符', trigger: 'blur' },
    {required: true, message: '请输入收货联系方式', trigger: 'blur' },
        ],
        
        blindSampleNum:[{max:30, message: '盲样编号不能超过30个字符', trigger: 'blur'}],
        executiveStandard:[{max:50, message: '执行标准不能超过50个字符', trigger: 'blur'}],
        productPackaging:[{max:20, message: '产品包装不能超过20个字符', trigger: 'blur'}],
        sampleBatchNum:[{max:20, message: '样品批次号不能超过20个字符', trigger: 'blur'}],
        storeCondition:[{max:20, message: '储存条件不能超过20个字符', trigger: 'blur'}],
        samplingCardinalNum:[{max:20, message: '抽样基数不能超过20个字符', trigger: 'blur'}],
        signAndSampleUrl:[{required: true, message: '请上传文件', trigger: 'change' }],
        // requireAttachment:[{required: true, message: '请上传文件', trigger: 'change' }],
      }
// 弹出层搜索
const dialogSearch =async ()=>{
  getDialogTableData()
}

const dialogSearch1 =async ()=>{
  getTableList1()
}


// 弹出层重置
const dialogReset = ()=>{
  console.log('111')
  dialogForm.value = {
  num:'',
  name:'',
  pageNo:1,
  pageSize:100
}
getDialogTableData()

}




const selectRadioItem = ref({})


const dialogTableData = ref([])

// 弹出层确认
const dialogEntry = ()=>{
  formData.value.executiveStandard = selectRadioItem.value.name
  dialogVisible.value = false
  if(selectRadioItem.value.id){
    formData.value.executiveStandardId = selectRadioItem.value.id
  }

}


const dialogEntry1 = ()=>{
  if(!selectable1.value) {
    message.warning('请选择项目')
    return 
  }
  // formData selectable1.value
  console.log(selectable1.value,'projectId')
  formData.value.projectManage.startTime = selectable1.value.createTime
  formData.value.projectManage.endTime = selectable1.value.endTime
  formData.value.projectManage.firstpartyName = selectable1.value.firstpartyName
  formData.value.projectManage.contractAmount = selectable1.value.contractAmount
  formData.value.projectManage.projectManager = selectable1.value.projectManager
  formData.value.projectManage.projectId = selectable1.value.id
  formData.value.projectId = selectable1.value.id
  formData.value.name = selectable1.value.name
  dialogVisible1.value = false

  getProjectName(selectable1.value.id)
}


const getDialogTableData = async ()=>{
 const res = await  StandardMaintainApi.getStandardMaintainPage(dialogForm.value)
 console.log(res)

 dialogTableData.value = res.list
  
}

const selectedRowId = ref(1)

// table栏单选
const dialogRadio = (row)=>{
  console.log(row)
  selectRadioItem.value = row
}

// 执行标准图标打开弹窗
const handleSearch = ()=>{
  dialogVisible.value = true
  getDialogTableData()
}

const getDetail = async () => {
  if (route.query.id) {
    const res = await SampleInformationApi.getSampleInformation(id as number)
    console.log(res)
    formData.value = res
    formData.value.targetRequire = res.targetRequire
    formData.value.resultRequire = res.resultRequire
    formData.value.name = res.projectName
    formData.value.projectManage = res.projectManage
    let url = res.signAndSampleUrl
    console.log(res.requireAttachment,'requireAttachment')
    let url1 = res.requireAttachment
    // fileList.value.push(res.signAndSampleUrl)
    fileList.value = (url || '').split(';').map(
      (item,index) => {
      return  {
        uid: Math.random().toString(10).slice(3), // 生成唯一的 uid
        name: '附件'+(index+1), // 从 URL 中提取文件名
        url: item
      }
      }
    ).filter( item => item.url)
    getProjectName(res.projectManage.id)

    fileList1.value = (url1 || '').split(';').map(
      (item,index) => {
      return  {
        uid: Math.random().toString(10).slice(3), // 生成唯一的 uid
        name: '附件'+(index+1), // 从 URL 中提取文件名
        url: item
      }
      }
    ).filter( item => item.url)

    console.log(9999,fileList1)
  }
}

const handleSave = async (status) => {
  console.log(formData.value.status,'status')
await uploadFiles1()

 await uploadFiles2()


 
// formData.value.signAndSampleUrl =fileList.value.map(item => item.url || item).join(';')
// formData.value.requireAttachment =fileList1.value.map(item => item.url || item).join(';')
  if (!formRef.value) return
  await formRef.value.validate(async (valid: boolean) => {

    // formData.value.
    if (valid) {
      formData.value.status =status
console.log(formData.value.status,'value')
      if (route.query.id) {
        try {
          await SampleInformationApi.updateSampleInformation(formData.value)
          message.success('操作成功')
          goBack()
        } catch (error) {
          message.success('操作失败')
        }
      } else if (!formData.value.id) {
        try {
          console.log('xinzeng ')
          await SampleInformationApi.createSampleInformation(formData.value)
          message.success('操作成功')
          goBack()
        } catch (error) {
          message.error('操作失败')
        }
      }
    }
  })
}

const handleSubmit = async () => {
  if(selectRadioItem.value.id){
    formData.value.standardType = 1
  }
formData.value.signAndSampleUrl =fileList.value.map(item => item.url || item).join(';')
formData.value.requireAttachment =fileList1.value.map(item => item.url || item).join(';')
  if (!formRef.value) return
  // 修改送检
  await formRef.value.validate(async (valid: boolean) => {
    if(valid){
      ElMessageBox.confirm(
    '确认送检吗？送检后将无法修改',
    '提示信息',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(async() => {
  

      if (route.query.id) {
    await formRef.value.validate(async (valid: boolean) => {
      if (valid) {
        try {
        formData.value.status = 1

          await SampleInformationApi.updateSampleInformation(formData.value)
          message.success('送检成功')
          goBack()
        } catch (error) {
          message.error('送检失败')
        }
      }
    })
  } else {
    await formRef.value.validate(async (valid: boolean) => {
      if (valid) {
        formData.value.status = 1
        try {
          await SampleInformationApi.createSampleInformation(formData.value)
          message.success('送检成功')
          goBack()
        } catch (error) {
          message.error('送检失败')
        }
      }
    })
  }
    })
    .catch(() => {

    })
    }
  })


}

const ruleCode = ref('')
const ruleItem = ref()
const getUserInfo = async () => {
  const res = await UserInfoApi.getUserInfoDetail()
  console.log(res, 'res')
  ruleCode.value = res.roleCode
  ruleItem.value = res
  console.log(ruleCode.value, 'ruleCode')
}

const goBack = () => {
  router.push('/InspectionInfoManagement1/sampleinformation')
}

const projectArr = ref([])
// 获取项目信息接口调用
const getProjectDetail = async () => {
  const res = await ProjectManagemenrApi.getProjectManagemenrPage()
  console.log(res.list)
  console.log(res, 'projectArr')
  projectArr.value = res.list
  projectArr.value.forEach((item)=>{
   item.name =  item.name +' ' + item.createTime
  })

  console.log(projectArr.value)
}

const orgList = ref([])

// const downloadFile = (file) => {
//   if (!file.url) {
//     message.error('文件地址不存在')
//     return
//   }
//   // 创建一个隐藏的a标签
//   const link = document.createElement('a')
//   link.style.display = 'none'
//   link.href = file.url
//   link.download = file.name || 'download'
//   document.body.appendChild(link)
//   link.click()
//   document.body.removeChild(link)
// }

// 模拟获取用户列表的API调用
const getUserList = async (keyword) => {
  // 这里替换成你的实际API调用
  // return await UserApi.getUserList({ keyword })
  // 示例数据结构
  return [
    { id: 1, name: '张三' },
    { id: 2, name: '李四' },
    { id: 3, name: '王五' }
  ]
}

// 查询建议
const querySearch = async (queryString, cb) => {
  if (queryString) {
    // 调用API获取匹配的用户列表
    const results = await getUserList(queryString)
    // 返回的数据必须包含 id 和 name
    cb(results)
  } else {
    cb([])
  }
}

// 选择建议项
const handleSelect = (item) => {
  // item 包含了完整的数据对象，包括 id 和 name
  queryParams.value.name = item.name
  queryParams.value.id = item.id  // 保存选中项的id
  console.log('选中的用户ID：', item.id)
}

// 输入框值变化
const handleInput = (value) => {
  if (!value) {
    queryParams.value.id = undefined // 当输入框清空时，清除id
  }
}

const getProjectName = async (value) => {
  const res = await ProjectManagemenrApi.getProjectManagemenr(value)
  console.log(res,'res======')
  formData.value.projectName = res.name
  formData.value.checkStartTime = res.createTime
  formData.value.checkEndTime = res.endTime
  formData.value.fistParty = res.firstpartyName
  formData.value.contractAmount = res.contractAmount
  formData.value.projectManage.startTime = res.startTime
  formData.value.projectManage.endTime = res.endTime
  formData.value.projectManage.projectManager = res.projectManager
  formData.value.projectManage.contractNum = res.contractNum
  formData.value.projectManage.contractAmount = res.contractAmount

  if(ruleCode.value == 'org_user'){
    orgList.value = [{
      name:ruleItem.value.companyName,
      id:Number(ruleItem.value.companyId)
    }]
  }else {
    orgList.value = res.orgList

  }
  
} 

const dialogReset1 = ()=>{
  dialogForm1.value = {
    firstpartyName:'',
    name:''
  }
  getTableList1()
}

onMounted(() => {
  getDetail()
  getUserInfo()
  getProjectDetail()
  getTableList1()
  
  if(route.query.id){
    route.meta.title = '编辑样品信息'
  }else {
    route.meta.title = '新增样品信息'
  }
})
</script>

<style lang="scss" scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;

  .title {
    font-size: 16px;
    font-weight: bold;
  }

  .right-button {
    display: flex;
    gap: 10px;
  }
}

.mb-4 {
  margin-bottom: 1rem;
}

.text-lg {
  font-size: 1.125rem;
}

.font-bold {
  font-weight: bold;
}

:deep(.el-upload--picture-card) {
  width: 100px;
  height: 100px;
  line-height: 100px;
}

/* 为自定义类名设置 placeholder 颜色 */

/* Vue 3 可以使用 :deep() 选择器 */
:deep(.custom-placeholder ::input-placeholder) {
  color: red;
}

:deep(.custom-placeholder :placeholder) {
  color: red;
  opacity: 1; /* Firefox 默认会降低 placeholder 的透明度，这里设置为 1 恢复正常 */
}

:deep(.custom-placeholder ::placeholder) {
  color: red;
  opacity: 1; 
}

:deep(.custom-placeholder :input-placeholder) {
  color: red;
}


::v-deep(.el-date-editor.el-input, .el-date-editor.el-input__wrapper){
  width: 100%;
}

::v-deep(.el-form--inline .el-form-item ){
  width: 100%;
}

::v-deep(.el-card__body){
  padding: 0;
}

::v-deep(.el-card__header){
  padding-top:5px;
  padding-bottom:5px ;
  margin-bottom:20px;
}

// ::v-deep(.el-card__body){
//   padding:10px;
// }

</style>
